<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>用户管理--教师</h1>
    <hr/>
    <table>
        <tr>
            <td>用户名</td>
            <td>学生姓名</td>
            <td>班级</td>
            <td>手机号码</td>
            <td>备注</td>
            <td colspan="3">操作</td>
        </tr>
        <tr th:each="user:${users}">
            <td th:text="${user.username}"></td>
            <td th:text="${user.realName}"></td>
            <td th:text="${user.classId}"></td>
            <td th:text="${user.phone}"></td>
            <td th:text="${user.remark}"></td>
            <td><button class="btn-del" onclick="deleteOne(this)" th:value="${user.id}">删除</button></td>
            <td><button class="btn-del" onclick="updatePhone(this)" th:value="${user.id}" th:id="${user.phone}">修改手机号码</button></td>
        </tr>
    </table>
    <script>
        function updatePhone(elm) {
            let s =  prompt("请输入手机号码",elm.id)
            if (s) {
                let id = elm.value
                let req = new XMLHttpRequest();
                req.open("PUT", "/api/user/", true);
                req.setRequestHeader('content-type', 'application/json');
                req.send(JSON.stringify({id:id,phone:s}));
                notify(req);
            }
        }
        function deleteOne(elm) {
            if (!confirm("真的要删除吗？")) return;
            let id = elm.value
            let req = new XMLHttpRequest();
            req.open("DELETE", "/api/user/"+id, true);
            req.send();
            notify(req);
        }
        async function notify(resp) {
            new Promise(()=>{
                console.log("called")

                setTimeout(()=>{
                    console.log(resp.readyState)
                },300)

                console.log("out")
            }).then(()=>{
                resp.status
                console.log(resp.status)
                alert(resp.status !== 200 ? "失败!" : "成功!")
            })
            console.log("out")
            // while (resp.readyState!==4) {
            //     console.log(resp.readyState)
            // }
            window.location.reload()
        }
    </script>
</body>
</html>